<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"开发_文件"}){} %>
</head>
<body>
<div id="app" class="layui-fluid">

  <div class="layui-card">
    <div class="layui-card-body">
      <t-form :data="queryForm" label-width="calc(4em + 20px)" layout="inline" colon>
        <t-form-item label="文件名称">
          <t-input v-model="queryForm.originalName" placeholder="输入文件原始名称" clearable></t-input>
        </t-form-item>
        <t-space align="center" breakLine>
          <t-button theme="primary" @click="queryData">
            <template #icon><i class="layui-icon layui-icon-search text-size-14 mr-10"></i></template>
            查询
          </t-button>
          <t-button theme="primary" @click="openUpload('')">
            <template #icon><i class="layui-icon layui-icon-upload text-size-14 mr-10"></i></template>
            上传文件
          </t-button>
        </t-space>
      </t-form>
    </div>
  </div>

  <div class="layui-card">
    <div class="layui-card-body">
      <t-table :columns="columns" :data="table.data" :loading="table.loading" bordered hover resizable>
        <template #loading>
          <div class="t-table--loading-message">加载数据中，请稍后...</div>
        </template>
      </t-table>
      <div class="pa-25 pb-15">
        <t-pagination v-model="queryForm.pageNumber" v-model:page-size="queryForm.pageSize" :total="table.totalRow" show-first-and-last-page-btn show-jumper
                      @change="queryData"></t-pagination>
      </div>
    </div>
  </div>
</div>

<script>
  const PATH_URL = "dev/file/";
</script>
<script>

  setupVue("#app", {
    setup() {

      // 查询表单
      const queryForm = Vue.reactive({ pageNumber: 1, pageSize: 10 });
      // 表格相关
      const table = useTable();
      const fetchData = window.reloadData = () => fetchPage(axiosGet, PATH_URL + "page", queryForm, table);
      const queryData = (info = {}) => {
        Vue.nextTick(() => {
          const { current = 1, pageSize } = info;
          queryForm.pageNumber = current;
          if (pageSize) queryForm.pageSize = pageSize;
          fetchData();
        })
      }
      init(() => {
        fetchData();
      });

      const onDetail = (row) => {
        openLayer({
          title: "文件详情",
          content: PATH_URL + "detail",
          data: { id: row.id },
        });
      }

      // 打开上传窗口
      const openUpload = () => {
        openLayer({
          title: "上传文件",
          area: ['1200px', '760px'],
          parent: true,
          content: PATH_URL + "upload",
          data: {
            description: "文件上传说明", // 文件上传说明
            queryUrl: PATH_URL + "list", // 查询文件列表路径
            uploadUrl: PATH_URL + "upload", // 上传文件路径
            query: { // 文件查询参数
              category: "测试",
              applyTo: "cs",
              refNum: "33",
            },
            upData: { // 上传参数
              category: "测试",
              applyTo: "cs",
              refNum: "33",
            },
            baseDir: "devFile", // 上传文件根路径
            dir: "ceshi", // 上传文件路径
            actionUpload: true, // 是否允许上传
            actionDown: true, // 是否允许下载
            actionDelete: true, // 是否允许删除
            types: ['jpg'], // 允许上传的文件类型
            multiple: true, // 是否多文件上传
            maxSize: 0, // 文件最大大小，0不限制
            success: () => fetchData(), // 上传文件成功后回调方法
            remove: () => fetchData(), //  删除文件后回调方法
          },
        });
      }

      // 删除
      const clickDelete = (row) => handleDelete(axiosDelete, PATH_URL + "delete", { id: row.id }, table, "确定删除开发_文件吗？", fetchData);

      // 表格列表显示
      const columns = [
        { colKey: 'serial-number', align: 'center', title: '序', width: "30px" },
        { colKey: 'category', title: '类别', align: 'center', width: '100px' },
        { colKey: 'type', title: '文件类型', align: 'center', width: '100px', ellipsis: true },
        { colKey: 'originalName', title: '文件原始名称', align: 'center', width: '200px', ellipsis: true },
        { colKey: 'suffix', title: '文件后缀', align: 'center', width: '80px' },
        {
          colKey: 'sizeInfo', title: '文件大小', align: 'center', width: "80px", cell: (h, { row }) => {
            return h(TDesign.Tag, { variant: 'light-outline', theme: 'default' }, row.sizeInfo)
          },
        },
        {
          title: '操作',
          align: 'center', width: '120px',
          cell: (h, { row }) => {
            return h(TDesign.Space, {}, [
              h(TDesign.Link, { theme: 'primary', onClick: () => onDetail(row) }, '查看'),
              h(TDesign.Link, { theme: 'danger', onClick: () => clickDelete(row) }, '删除'),
            ]);
          },
        },
      ];

      return {
        queryForm,
        table, columns, queryData,
        openUpload,

      }
    },
  });
</script>


</body>
</html>
